<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/imageView.css"/>
<style type="text/css">
/**index-list***/
.list-item{
	background: #fff;
	padding:10px;
	margin-bottom:7px;
	box-shadow:0 0 1px #ccc;
	-webkit-box-shadow:0 0 1px #ccc;
}
.list-item-t{
	display: flex;
	display: -webkit-flex;
	position: relative;
	padding-bottom: 10px;
}
.item-t-sl{
	display: block;
	width:50px;
	height:50px;
	background: #ccc;
	border-radius:50px;
	overflow: hidden;
}
.item-t-sr{
	-webkit-flex: 1;
	-webkit-box-flex: 1;
	position: relative;
	padding:5px 0 0 10px;
}
.item-t-sr-t{
	font-size: 18px;
	padding-bottom:5px;
	line-height: 100%;
}
.list-item-c{
	font-size: 16px;
	padding-bottom: 10px;
	line-height:25px;
	color: #555;
}
.item-t-sr-b{
	color: #999;
	font-size: 12px;
}

.list-item-b{
	display: flex;
	display: -webkit-flex;
	justify-content:space-between;
	-webkit-justify-content: space-between;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
}
.ib-imgitem{
	width:32.5%;
	height: 100px;
	-webkit-box-flex: 1;
	background:#ddd;
	margin-bottom: 5px;
	overflow: hidden;
	font-size: 0;
	overflow: hidden;
}
.item-t-srb-gz{
	float: right;
	position: absolute;
	right: 0;
	background: #FFC72C;
	color: #fff;
	padding:5px 15px 5px 15px;
	border-radius: 100px;
	font-size: 12px;
}
.list-item-b2{
	display: flex;
	position: relative;
	padding: 10px 0 0 0;
	font-size:14px;
}
.list-item-btn{
	display: block;
	width: 33.333333%;
	-webkit-box-flex: 1;
	color: #999;
	border-right: 1px solid #eee;
}
.list-item-btn:last-child{
	border-right-width: 0;
}
.tright{
	text-align: right;
}
.topic{
	width: 100%;
	height:45px;
	background: #ddd;
	padding: 5px;
}
#seachinput{
	display: block;
	height:35px;
	font-size: 14px;
	background: url(img/search.png) left center no-repeat #fff;
	background-size: 20px 20px;
	text-indent: 20px;
	box-shadow:0 0 1px #ccc;
	border-width: 0;
	-webkit-box-shadow:0 0 1px #ddd;
}
#jcontent{
	padding-top: 10px;
	padding-bottom: 15px;
}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	<div id="data-list"></div>
	<div id="loadingMore"></div>
</div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/page.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.lazyload.js"></script>
<script src="js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function() {
	_currentWebview=plus.webview.currentWebview();
	//滚动到底部
	document.addEventListener( "plusscrollbottom",function(){
		loadUtil.scrollBottom({
			callBack:function(){
				imgAjaxLazy();
			}
		});
	}, false );
	//下拉加载最新数据 
	_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
		loadUtil.pullToRefresh({
			callBack:function(){
				imgAjaxLazy();
			}
		});
	});
	
	lazyLoadApi = mui(document).imageLazyload({
		autoDestroy: false,
		duration:300
	});
	mui.previewImage();
});
function imgAjaxLazy(){
	window.setTimeout(function(){
		lazyLoadApi.refresh(true);
	},100);
}
/**
 * 
 * 发布帖子
 * 
 */
window.addEventListener("indexRiconClick", function(e) {
	webapp.openByTpl({
		title:"发布帖子",
		ricon:"发布",
		hrefs:"/tpl/addDongtai.html"
	});
});

/***
 * 
 * 加载数据
 * 
 */
window.addEventListener("loadList", function(e) {
	loadUtil.loadList({
		url:"/carLife/admin/interface/post/selectPageById",
		callBack:function(){
			imgAjaxLazy();
		}
	});
});
window.addEventListener("updateList", function(e) {
	loadUtil.pullToRefresh({
		callBack:function(){
			imgAjaxLazy();
		}
	});
	plus.webview.getTopWebview().hide("auto");
	webapp.closeWaiting();
	mui.toast("发布成功");
});

mui('#jcontent').on('tap','.taped-5', function() {
	var thisId=this.getAttribute("data-id");
	webapp.openByTpl({
		title:"帖子详情",
		hrefs:"/tpl/tiezi.html?id="+thisId
	});
});
</script>

<script id="tpl-list" type="text/html">
{{each data as item i}}
<div id="tpl-list" class="list-item"  data-id="{{item.id}}">
	<div class="list-item-t">
		<a class="item-t-s item-t-sl taped taped-1">
			<img data-src="" src="{{imgPath}}{{item.headPortraitMap.path}}-120{{item.headPortraitMap.type}}"/>
		</a>
		<div class="item-t-s item-t-sr">
			<div class="item-t-sr-t">{{item.nickName}}</div>
			<div class="item-t-sr-b">{{dateFormat(item.createTime,'yyyy-MM-dd HH:mm')}}</div>
		</div>
		<a class="item-t-srb-gz" name="follow_seller">
			<i class="iconfont icon-pinglun"></i>
			{{item.commentNum}}
		</a>
	</div>
	<div class="list-item-c taped taped-5" data-id="{{item.id}}">
		{{item.content}}
	</div>
	<div class="list-item-b" data-id="{{item.id}}">
		
		{{each item.imagesList as imgeItem j}}
		{{imgPath}}{{imgeItem.path}}-120{{imgeItem.type}}
		<div id="item-imgs-item-{{j}}" class="ib-imgitem" style="width:{{imgW}}px;height: {{imgW}}px;">
			
			<img class="{{if imgeItem.proportion==1}}img{{else if proportion==2}}img{{else}}imgw{{/if}}" style="height:{{imgW}}px;" data-lazyload="{{imgPath}}{{imgeItem.path}}-120{{imgeItem.type}}" src="{{imgPath}}{{imgeItem.path}}-120{{imgeItem.type}}"  data-preview-src="{{imgPath}}{{imgeItem.path}}{{imgeItem.type}}" data-preview-group="{{item.id}}"/>
		</div>
		{{/each}}
		
		{{if item.imagesList.length==2 || item.imagesList.length==5 || item.imagesList.length==8}}
		<div class="ib-imgitem noimg" style="width:{{imgW}}px;height: {{imgW}}px;"></div>
		{{/if}}
			
	</div>
</div>
{{/each}}
</script>
</body>
</html>
